<template>
  <div class="article">
    <Row>
      <Col span="17">
      <Form :model="form" label-position="left" :label-width="78">
        <FormItem label="文章标题">
          <Input v-model="form.title" placeholder="输入文章标题…"></Input>
        </FormItem>
        <FormItem label="文章类型">
          <Input v-model="form.category" placeholder="输入文章类型…因为现在还没有做栏目功能…"></Input>
        </FormItem>
      </Form>
      <br>
      <div>
        <p> - 正 文 - </p>
        <br>
        <div id="editorElem" style="text-align:left"></div>
        <br>
        <div class="operation">
          <Button type="ghost" v-on:click="reset">清空</Button>
          <Button type="ghost" v-on:click="getContent">查看内容</Button>
          <Button type="primary" v-on:click="goSubmit">发表</Button>
        </div>
      </div>
      </Col>
    </Row>
  </div>

</template>

<style>
  #editorElem {
    width: 95%;
    transform: translateX(5%);
  }

  .operation {
    text-align: right;
    padding-right: 15px;
  }

  .operation button {
    margin-right: 20px;
  }

  .article{
    margin-top: 20px;
    margin-left: 20px;
  }
</style>

<script>
  import E from "wangeditor";
  export default {
    data() {
      return {
        form: {
          title: null,
          category: null
        },
        editorContent: "",
        text: "输入内容…"
      };
    },
    methods: {
      getContent: function () {
        alert(this.editorContent);
      },
      goSubmit: function () {
        if (this.form.title == null || this.form.title.length < 3) {
          this.$Message.warning("文章标题 长度应保持在 3位以上。");
          return false;
        } else if (this.form.category == null || this.form.category.length < 2) {
          this.$Message.warning("文章类型 长度应保持在 2位以上。");
          return false;
        } else if (this.editorContent == null || this.editorContent.length < 10) {
          this.$Message.warning("文章 长度应保持在 10位以上。");
          return false;
        } else {
          let articledata = {
            title: this.form.title,
            category: this.form.category,
            body: this.editorContent
          };
          let that = this;
          this.$axios.post("backend/article", articledata, function (res) {
            if (res == 0) {
              that.$Message.error("文章新增失败。");
            } else {
              that.$Message.success("文章新增成功。");
            }
          });
        }
      },
      reset: function () {
        this.form = {};
        this.init();
      },
      init: function () {
        var editor = new E("#editorElem");
        editor.customConfig.onchange = html => {
          this.editorContent = html;
        };
        editor.customConfig.uploadImgServer = "/tp5/public/uploads";
        editor.create();
        editor.txt.html(this.text);
      }
    },
    mounted() {
      this.$store.commit("bread", "新增文章");
      this.init();
    }
  };

</script>
